<template>
    <div id="box">
        <div class="box-top">
            <p style="font-weight:800; font-size: 20px;height: 50px;line-height: 50px;text-align: center;">注册</p>
        </div>
        <div class="box-center">
            <div class="box-inp">
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize"
                    status-icon>
                    <el-form-item prop="username">
                        <el-input class="input-size" v-model="ruleForm.username" placeholder="请输入用户名" />
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input class="input-size" style="border: 0;" v-model="ruleForm.password"
                            placeholder="请输入6-12非纯数字新密码" />
                    </el-form-item>

                    <el-form-item prop="regin">
                        <el-input class="input-size" @click="ddd" v-model="ruleForm.regin" placeholder="请输入6位验证码" />
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- =============登录============ -->

        <!-- =============登录按钮============ -->
        <div class="box-btn">
            <button @click="sent(ruleFormRef)">注册</button>
        </div>
        <!-- =============登录按钮============ -->

        <!-- =============注册============ -->
        <div class="box-font">
            <p>
                <a href="" style="color: #808080;float: right;">获取不到验证码？</a>
            </p>
        </div>
        <!-- =============注册============ -->
    </div>

<router-view></router-view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { register } from "@/api/productList.js"


const formSize = ref("default")
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: "",
    regin: "",
    password: "",
})

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { max: 11, message: '请输入正确的用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { message: '请输入6-12位数字与字符组成的密码', trigger: 'blur' },
    ],
    regin: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 6, max: 6, message: '验证码格式不对', trigger: 'blur' },
    ],
})

// 注册
// let sent = () =>{
//     if(ruleForm.username.length == 0 && ruleForm.username.length < 11){
//         ElMessage.error('请输入正确的手机号')
//     }else if(){

//     }
// }
const sent = async (formEl) => {
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 验证成功
            // axios.post("http://192.168.1.207:3333/register",{username:ruleForm.username,password:ruleForm.password})
            register({ username: ruleForm.username, password: ruleForm.password })
                .then(res => {
                    console.log(res.data)
                    if (res.status == 200) {
                        ElMessage({
                            showClose: true,
                            message: '注册成功',
                            type: 'success',
                        })
                    }
                })
        } else {
            return false
        }
    })
}

// let ddd = () => {
//     if (ruleForm.username.length < 11) {

//     }
// }
</script>

<style lang="scss">
#box {
    margin: auto;

    .box-top {
        border: 0;
        border-bottom: 1px solid #f6f6f6;
        outline: none;
    }

    .box-center {
        margin-top: 20px;

    }

    .box-top-login {
        display: flex;
        justify-content: space-evenly;

    }

    .box-inp {
        padding: 10px 30px 0px 30px;

        .el-input__wrapper {
            box-shadow: 0 0 0 0;
            height: 40px;
        }
    }

    .box-btn {
        padding: 30px 30px 0px 30px;

        button {
            padding: 15px;
            border-radius: 4px;
            border: 0;
            width: 100%;
            background-color: #ffcc00;
        }
    }

    .box-font {
        padding: 30px 30px 0px 30px;

        p {
            font-size: 12px;
        }

        span {
            color: blue;
        }
    }
}
</style>